// 1. 小图片切换
{
    var productImgList = [
        { small: './static/images/img/goods/1-small.png', big: './static/images/img/goods/1-big.png' },
        { small: './static/images/img/goods/2-small.png', big: './static/images/img/goods/2-big.png' },
        { small: './static/images/img/goods/3-small.webp', big: './static/images/img/goods/3-big.png' },
        { small: './static/images/img/goods/4-small.png', big: './static/images/img/goods/4-big.png' },
        { small: './static/images/img/goods/5-small.png', big: './static/images/img/goods/5-big.png' },
        { small: './static/images/img/goods/6-small.png', big: './static/images/img/goods/6-big.png' },
        { small: './static/images/img/goods/7-small.png', big: './static/images/img/goods/7-big.png' },
        { small: './static/images/img/goods/8-small.png', big: './static/images/img/goods/8-big.png' },
        { small: './static/images/img/goods/9-small.png', big: './static/images/img/goods/9-big.png' }
    ]

    // 获取左右切换按钮
    var leftArrow = document.querySelector('.small-list .arrow-l');
    var rightArrow = document.querySelector('.small-list .arrow-r');
    // 获取图片列表
    var smallImgDomList = document.querySelector('.small-list .list>div');
    var smallImgIndex = 0;

    leftArrow.onclick = function() {
        var start = smallImgIndex * 64;
        smallImgIndex++;
        smallImgIndex = smallImgIndex > productImgList.length - 5 ? productImgList.length - 5 : smallImgIndex;
        var target = smallImgIndex * 64;
        var timer = setInterval(function() {
            if (start <= target) {
                start++;
                smallImgDomList.style.left = -start + 'px';
            } else {
                clearInterval(timer);
            }
        }, 1);
    }

    rightArrow.onclick = function() {
        var start = smallImgIndex * 64;
        smallImgIndex--;
        smallImgIndex = smallImgIndex <= 0 ? 0 : smallImgIndex;
        var target = smallImgIndex * 64;
        var timer = setInterval(function() {
            if (start >= target) {
                start--;
                smallImgDomList.style.left = -start + 'px';
            } else {
                clearInterval(timer);
            }
        }, 1);
    }
}

// 2. 放大镜
{
    // 获取大图对象
    var bigPic = document.querySelector('.big-pic');
    var bigPicImg = document.querySelector('.big-pic>img');
    var mask = document.querySelector('.mask');
    var megaloscope = document.querySelector('.megaloscope');
    var megaloscopeImg = document.querySelector('.megaloscope>img');
    var smallImgObjList = document.querySelectorAll('.list img');

    bigPic.onmouseenter = function() {
        mask.style.display = 'block';
        megaloscope.style.display = 'block';
    }

    bigPic.onmouseleave = function() {
        mask.style.display = 'none';
        megaloscope.style.display = 'none';
    }

    bigPic.onmousemove = function(e) {
        // 获取mask对象，left 和 top 的值
        // e.clientX : 鼠标与浏览器最左侧之间的距离
        // this.offsetLeft： 当前元素和浏览器最左侧之间的距离
        // e.clientX - this.offsetLeft - mask.offsetWidth / 2 ： 计算mask的left的值
        var maskX = e.clientX - this.offsetLeft - mask.offsetWidth / 2;
        var maskY = e.clientY - this.offsetTop - mask.offsetHeight / 2;

        // 修正maskX的值
        maskX = maskX < 0 ? 0 : maskX > 200 ? 200 : maskX;
        maskY = maskY < 0 ? 0 : maskY > 200 ? 200 : maskY;

        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        var b = (megaloscopeImg.offsetWidth - megaloscope.offsetWidth + 2) / mask.offsetWidth;

        megaloscopeImg.style.left = -maskX * b + 'px';
        megaloscopeImg.style.top = -maskY * b + 'px';

    }

    smallImgObjList.forEach(function(item, index) {
        item.onmouseenter = function() {
            this.style.border = '2px solid #B1191A';
            bigPicImg.src = productImgList[index].big;
            megaloscopeImg.src = productImgList[index].big;
        }
        item.onmouseleave = function() {
            this.style.border = '';
        }
    })
}



// 增加、减小购买数量
{
    var addBtn = document.querySelector('.add');
    var reduceBtn = document.querySelector('.reduce');
    var numInput = document.querySelector('.num');

    addBtn.onclick = function() {
        var num = numInput.value;
        num++;
        numInput.value = num;
        reduceBtn.style.cursor = 'pointer';
    }

    reduceBtn.onclick = function() {
        var num = numInput.value;
        num = num > 1 ? --num : 1;
        numInput.value = num;
        if (num > 1) {
            this.style.cursor = 'pointer';
        } else {
            this.style.cursor = 'not-allowed';
        }
    }
}
// tab栏切换
{
    var titleTabs = document.querySelectorAll('.title-tab a');
    var contentTabs = document.querySelectorAll('.info-tab div');

    for (var i = 0; i < titleTabs.length; i++) {
        titleTabs[i].index = i;
        titleTabs[i].onclick = function() {
            for (var j = 0; j < titleTabs.length; j++) {
                titleTabs[j].className = '';
                contentTabs[j].className = '';
            }
            this.className = 'current';
            contentTabs[this.index].className = 'current';
        }
    }
}